<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏平台 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: { extend: { colors: { primary: '#3B82F6', secondary: '#10B981' } }
            }
    </script>
    <style type="text/tailwindcss">@layer utilities { .content-auto { content-visibility: auto; } }</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- 导航栏 -->
<nav class="bg-white shadow-md sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <a href="/webapp/static" class="text-2xl font-bold text-primary flex items-center"><i class="fa fa-gamepad mr-2"></i>GamePlatform</a>
        <div class="hidden md:flex space-x-6 items-center">
            <a href="/game.html" class="text-gray-700 hover:text-primary transition-colors">猜数字游戏</a>
            <a href="/scoreboard.html" class="text-gray-700 hover:text-primary transition-colors">排行榜</a>
            <div id="userMenu" class="hidden"><button id="userBtn" class="flex items-center text-gray-700 hover:text-primary"><span id="username">游客</span><i class="fa fa-caret-down ml-1"></i></button>
                <div id="userDropdown" class="hidden absolute bg-white shadow-lg rounded-md mt-2 py-2 w-48 z-10">
                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">个人中心</a>
                    <a href="#" id="logoutBtn" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">退出登录</a>
                </div>
            </div>
            <a href="/login.html" id="loginBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:shadow-lg hover:-translate-y-0.5 transition-all">登录</a>
            <a href="/register.html" id="regBtn" class="px-4 py-2 bg-white text-primary border border-primary rounded-md hover:shadow-lg hover:-translate-y-0.5 transition-all">注册</a>
        </div>
        <button class="md:hidden text-gray-700" id="mobileMenuBtn"><i class="fa fa-bars text-xl"></i></button>
    </div>
    <div id="mobileMenu" class="hidden md:hidden bg-white border-t"><div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
        <a href="/game.html" class="text-gray-700 hover:text-primary py-2">猜数字游戏</a>
        <a href="/scoreboard.html" class="text-gray-700 hover:text-primary py-2">排行榜</a>
        <div id="mobileUserMenu" class="hidden py-2"><button id="mobileUserBtn" class="flex items-center text-gray-700 hover:text-primary"><span id="mobileUsername">游客</span><i class="fa fa-caret-down ml-1"></i></button>
            <div id="mobileDropdown" class="hidden bg-white shadow-md rounded-md mt-2 py-2"><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">个人中心</a><a href="#" id="mobileLogoutBtn" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">退出登录</a></div>
        </div>
        <div id="mobileAuth" class="flex space-x-3 py-2"><a href="/login.html" class="flex-1 text-center px-4 py-2 bg-primary text-white rounded-md hover:shadow-lg transition-all">登录</a><a href="/register.html" class="flex-1 text-center px-4 py-2 bg-white text-primary border border-primary rounded-md hover:shadow-lg transition-all">注册</a></div>
    </div></div>
</nav>

<!-- 主内容 -->
<main class="container mx-auto px-4 py-8">
    <section class="max-w-5xl mx-auto">
        <div class="text-center mb-12">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-gray-800 mb-4">欢迎来到 GamePlatform</h1>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">挑战猜数字游戏，登上排行榜，看看谁是猜数字大师！</p>
        </div>

        <!-- 游戏卡片 -->
        <div class="grid grid-cols-1 gap-6 mb-16">
            <a href="/game.html" class="group">
                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                    <div class="h-64 relative"><img src="https://picsum.photos/800/400?random=1" alt="猜数字游戏" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4">
                            <h3 class="text-white text-2xl font-bold">猜数字</h3>
                        </div>
                    </div>
                    <div class="p-5"><p class="text-gray-600 mb-3">猜出系统随机生成的数字，考验你的逻辑推理能力</p>
                        <div class="flex justify-between items-center"><span class="text-sm text-gray-500">难度：★★☆☆☆</span>
                            <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">热门</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <!-- 排行榜预览 -->
        <div class="bg-white rounded-xl p-6 shadow-md mb-12">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold text-gray-800 flex items-center"><i class="fa fa-trophy text-secondary mr-2"></i> 猜数字排行榜</h2>
                <a href="/scoreboard.html" class="text-primary hover:underline text-sm">查看全部 <i class="fa fa-arrow-right ml-1"></i></a>
            </div>
            <div id="scoreboard" class="space-y-4">
                <div class="animate-pulse bg-gray-50 rounded-lg p-3 flex items-center"><div class="w-8 h-8 rounded-full bg-yellow-500 text-white flex items-center justify-center font-bold mr-3">1</div>
                    <div class="flex-1"><div class="font-medium">加载中...</div><div class="text-sm text-gray-500">分数: --</div></div>
                    <div class="text-secondary font-bold">--</div>
                </div>
            </div>
        </div>
    </section>
</main>


<!-- 通知组件 -->
<div id="toast" class="fixed top-20 right-4 max-w-xs bg-white rounded-lg shadow-lg p-4 transform transition-all duration-300 translate-x-full z-50"><div class="flex items-start">
    <div class="mr-3 mt-1"><i class="fa fa-info-circle text-primary text-lg"></i></div>
    <div class="flex-1"><h4 id="toastTitle" class="font-bold text-gray-800">通知</h4>
        <p id="toastMsg" class="text-gray-600 text-sm mt-1">内容将显示在这里</p>
    </div>
    <button id="closeToast" class="text-gray-400 hover:text-gray-600"><i class="fa fa-times"></i></button>
</div></div>

<script>
    const API_URL = '/api';

    // 显示通知
    function showToast(title, msg, type = 'info') {
        const toast = document.getElementById('toast');
        const titleEl = document.getElementById('toastTitle');
        const msgEl = document.getElementById('toastMsg');
        const icon = toast.querySelector('i');

        titleEl.textContent = title;
        msgEl.textContent = msg;

        // 设置图标和颜色
        icon.className = 'mr-3 mt-1 fa';
        if (type === 'success') {
            icon.classList.add('fa-check-circle', 'text-secondary');
        } else if (type === 'error') {
            icon.classList.add('fa-exclamation-circle', 'text-red-500');
        } else {
            icon.classList.add('fa-info-circle', 'text-primary');
        }

        // 显示通知
        toast.classList.remove('translate-x-full');
        toast.classList.add('translate-x-0');

        // 自动关闭
        setTimeout(() => {
            toast.classList.remove('translate-x-0');
            toast.classList.add('translate-x-full');
        }, 3000);
    }

    // 检查登录状态
    function checkLogin() {
        fetch(`${API_URL}/auth/status`)
            .then(res => res.json())
            .then(data => {
                if (data.loggedIn) {
                    document.getElementById('username').textContent = data.username;
                    document.getElementById('mobileUsername').textContent = data.username;
                    document.getElementById('userMenu').classList.remove('hidden');
                    document.getElementById('mobileUserMenu').classList.remove('hidden');
                    document.getElementById('loginBtn').classList.add('hidden');
                    document.getElementById('regBtn').classList.add('hidden');
                    document.getElementById('mobileAuth').classList.add('hidden');
                }
            })
            .catch(err => console.error('登录状态检查失败:', err));
    }

    // 加载排行榜数据
    function loadScoreboard() {
        fetch(`${API_URL}/scoreboard/top/3?gameType=guess`)
            .then(res => res.json())
            .then(data => {
                const container = document.getElementById('scoreboard');
                container.innerHTML = '';

                if (data && data.length > 0) {
                    data.forEach((user, index) => {
                        const rankClass = index === 0 ? 'bg-yellow-500 text-white' :
                            index === 1 ? 'bg-gray-400 text-white' :
                                index === 2 ? 'bg-amber-700 text-white' : 'bg-gray-200 text-gray-700';

                        const item = document.createElement('div');
                        item.className = 'bg-gray-50 rounded-lg p-3 flex items-center hover:bg-gray-100 transition-colors';
                        item.innerHTML = `
                                <div class="w-8 h-8 rounded-full ${rankClass} flex items-center justify-center font-bold mr-3">${index + 1}</div>
                                <div class="flex-1"><div class="font-medium">${user.username}</div><div class="text-sm text-gray-500">猜测次数: ${user.score}</div></div>
                                <div class="text-secondary font-bold">${user.score}</div>
                            `;
                        container.appendChild(item);
                    });
                } else {
                    container.innerHTML = '<div class="text-center text-gray-500 py-4">暂无排行榜数据</div>';
                }
            })
            .catch(err => {
                console.error('排行榜加载失败:', err);
                showToast('加载失败', '获取排行榜数据失败，请稍后再试', 'error');
            });
    }

    // 移动端菜单切换
    document.getElementById('mobileMenuBtn').addEventListener('click', () => {
        document.getElementById('mobileMenu').classList.toggle('hidden');
    });

    // 用户下拉菜单切换
    document.getElementById('userBtn').addEventListener('click', () => {
        document.getElementById('userDropdown').classList.toggle('hidden');
    });
    document.getElementById('mobileUserBtn').addEventListener('click', () => {
        document.getElementById('mobileDropdown').classList.toggle('hidden');
    });

    // 退出登录
    document.getElementById('logoutBtn').addEventListener('click', logout);
    document.getElementById('mobileLogoutBtn').addEventListener('click', logout);

    function logout() {
        fetch(`${API_URL}/auth/logout`, { method: 'POST' })
            .then(res => {
                if (res.ok) {
                    window.location.href = '..';
                } else {
                    showToast('退出失败', '服务器错误，请稍后再试', 'error');
                }
            })
            .catch(err => {
                console.error('退出登录失败:', err);
                showToast('退出失败', '发生未知错误，请稍后再试', 'error');
            });
    }

    // 关闭通知
    document.getElementById('closeToast').addEventListener('click', () => {
        document.getElementById('toast').classList.add('translate-x-full');
    });

    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', () => {
        checkLogin();
        loadScoreboard();

        // 导航栏滚动效果
        window.addEventListener('scroll', () => {
            const nav = document.querySelector('nav');
            if (window.scrollY > 10) {
                nav.classList.add('py-2', 'shadow-lg');
                nav.classList.remove('py-3', 'shadow-md');
            } else {
                nav.classList.add('py-3', 'shadow-md');
                nav.classList.remove('py-2', 'shadow-lg');
            }
        });
    });
</script>
</body>
</html>